<template>
	<view class="sa_content">
		<!-- 返回，默认返回首页 -->
		<view class="sa_return">
			<image :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode=""
				@click="handelReturn" />
			<view></view>
		</view>
		<!-- 认证您的身份 -->
		<view class="sa_imgs">
			<image :src="HTTP_IMG_UTL+'authentication_282@2x.png'" mode=""
				style="width:376rpx;height: 55rpx;" v-if="lang==='zh'" />
			<view v-if="lang==='ru'" style="font-size: 36rpx;font-weight: bold;">Подтверждение информации вашей компании
			</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='zh'">将获得智能助手，精准推送及专属图标</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='ru'">Получить виртуального помощника,
				push-уведомления и эксклюзивный значок</view>
		</view>
		<!-- 经营范围文字 -->
		<view class="sa_nationality_title">
			<view>{{$t('经营范围')}}</view>
		</view>
		<view class="sa_sales">
			<u-input :clearable="clearable"  maxlength="200" count :placeholder="$t('请输入经营范围')" v-model="value" :type="type" :border="border" :height="heights" :auto-height="autoHeight" />
		</view>
		<!-- 可提供运输服务（多选）文字 -->
		<view class="sa_License_title">
			<view>{{$t('可提供运输服务（多选）')}}</view>
		</view>
		<view class="sa_cards">
			<view :class="setIncludes(index)?'sa_card_block':'sa_card_block_active'" v-for="(item,index) in transportationData" :key="index" @click="handeleTransportation(index)">
				<image v-if="index===0" :src="HTTP_IMG_UTL+'card.png'" mode="" style="width: 66rpx;height: 55rpx;"/>
				<image v-if="index===1" :src="HTTP_IMG_UTL+'train.png'" mode="" style="width: 68rpx;height: 38rpx;"></image>
				<image v-if="index===2" :src="HTTP_IMG_UTL+'ship.png'" mode="" style="width: 72rpx;height: 46rpx;"></image>
				<image v-if="index===3" :src="HTTP_IMG_UTL+'aircraft.png'" mode="" style="width: 68rpx;height: 46rpx;"></image>
			</view>
		</view>
		<!-- 主要运输路线文字 -->
		<view class="sa_License_title">
			<view>{{$t('主要运输路线')}}</view>
		</view>
		<view class="sa_StartingFrom">
			<view class="sa_nlock">
				<!-- <view>{{$t('请选择出发地')}}</view> -->
				<formCity :is_register="1" :item="cityItemStart" :is_port="true" @change="selCityStart" />
				<image 
				:src="HTTP_IMG_UTL+'register_223@2x.png'" 
				mode="" 
				style="width: 20rpx;height: 12rpx;"></image>
			</view>
			<image :src="HTTP_IMG_UTL+'chufa_461@4x.png'" mode="" style="width: 40rpx;height: 20rpx;"></image>
			<view class="sa_nlock">
				<!-- <view>{{$t('请选择目的地')}}</view> -->
				<formCity  :is_register="1" :item="cityItemEnd" :is_port="true" @change="selCityEnd" />
				<image
				:src="HTTP_IMG_UTL+'register_223@2x.png'" 
				mode="" 
				style="width: 20rpx;height: 12rpx;"></image>
			</view>
		</view>
		<!-- 营业执照文字 -->
		<view class="sa_License_title">
			<view v-if="lang==='zh'">{{$t('营业执照')}} ({{$t('选填')}})</view>
			<view v-if="lang==='ru'">{{$t('认证视频')}} ({{$t('选填')}})</view>
		</view>
		<view class="sa_detail" v-if="lang==='ru'">
			Запишите видеоподтверждение, в котором вы произносите следующее: “Я представитель российской перевозчик. Хочу найти заказы на доставку грузов на платформе GLUZ и предлагаю свои услуги по перевозке, в связи с этим подаю заявку на подтверждение.”
		</view>
		<view class="sa_images">
			<!-- 上传图片 -->
			<u-upload 
			v-if="lang==='zh'"
					  style="margin-top: 30rpx;padding: 0rpx;margin-left: -10rpx;"
			          :action="action"
			          :file-list="list"
			          :max-size="imageMaxSize"
					  :max-count="max_count" 
			          :width="width"
			          :height="height"
			          :auto-upload="autoUpload"
			          :show-upload-list="showUploadList"
			          :del-bg-color="delBgColor"
			          :del-color="delColor"
			          :upload-text="uploadText"
			          :limit-type="limitType"
			          @on-success="onSuccess"
			          @on-remove="onRemove"
					  :show-progress="showProgress"
			/>
		</view>
		<view v-if="lang==='ru'" style="margin-top: 68rpx;width: 80%;display: flex;justify-content: center;" >
			<formVideos :item="formItem" :postvideo="videoData" :postid="postId" @change="selVideos" />
		</view>
		<view class="sa_but">
			<view class="but_left">
				<u-button @click="handelPreviouspage">{{$t('上一步')}}</u-button>
			</view>
			<view class="but_right">
				<u-button class="custom-style" @click="submit" :disabled="isDisabled" :loading="isLoading">{{$t('认证')}}</u-button>
			</view>
		</view>
		<view class="backColor"></view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import formVideos from "./components/formVideos.vue";
	import formCity from "@/components/buildForm/formCity.vue";
import {HTTP_REQUEST_URL, IMAGE_MAX_SIZE, IMAGE_MAX_COUNT} from '@/config/app';
	export default {
		components: {
			formVideos,
			formCity
		},
		data() {
			return {
				HTTP_IMG_UTL,
				isDisabled:false,
				isLoading:false,
				formItem: {
					required: false,
					label: '',
					key: 'video',
					value: []
				},
				videoData: '', // 假设这是视频URL或相关数据
				postId: 0, // 假设这是商品或帖子的ID
				// ------------------------------------------------
				cityItemStart: {
					key: "city_id",
					label: false,
					placeholder: this.$t('出发地'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				cityItemEnd: {
					key: "city_id",
					label: false,
					placeholder: this.$t('目的地'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				transportationData:['1','2','3','4'],//可提供运输服务的数组，多选
				showProgress:false,//图片上传配置
				width:'600',//图片上传配置
				height:'212',//图片上传配置
				autoUpload: true,//图片上传配置
				showUploadList: true,//图片上传配置
				delBgColor: '#fa3534',//图片上传配置
				delColor: '#ffffff',//图片上传配置
				max_count:1,//图片上传的最大数量
				action: HTTP_REQUEST_URL + '/common/upload',//服务器上传地址
				imageMaxSize: IMAGE_MAX_SIZE,//图片上传配置
				imageMaxCount: IMAGE_MAX_COUNT,//图片上传配置
				uploadText: this.$t('请上传营业执照副本照片'),//图片上传配置
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],//图片上传配置
				clearable:false,
				value: '',//承接业务
				type: 'textarea',
				border: true,
				heights: 218,
				autoHeight: true,
				lang: 'zh',
				nowLang: 'zh', //获取协议接口使用的当前语言
				list: [],//默认显示的图片列表，数组元素为对象，必须提供url属性
				formDatas:[],//图片列表
				data:{},
				userid:"",//userid
				videoUrl:'',//视频
				serverData:[],//可体哦那个运输服务数据
				serverID:[],
				start:'',//出发地
				end:'',//目的地
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
		},
		onShow() {
			this.nowLang = this.$i18n.locale
			// 获取当权语言
			this.getLang()
		},
		methods: {
			// 可提供运输服务css使用
			setIncludes(index){
				return this.serverID.includes(index)
			},
			// 获取到视频
			selVideos(key, value) {
				this.videoUrl = value[0].url
			},
			// 认证
			submit() {
				if (this.value === '') {
					uni.showToast({
						title: this.$t('请输入经营范围'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.serverData.length ==0){
					uni.showToast({
						title: this.$t('请至少选择一项服务'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.start==''){
					uni.showToast({
						title: this.$t('请选择出发地'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.end == ''){
					uni.showToast({
						title: this.$t('请选择目的地'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.lang==='zh'){ //如果为中国则检查图片是否为空，为空则提示
					this.getApi()
					return;
					if(this.formDatas.length===0){
						uni.showToast({
							title: this.lang==='zh'?this.$t('请上传营业执照副本照片'):this.$t('请上传视频'),
							icon: 'none',
							duration: 1000
						})
					}else {
						this.getApi()
					}
				}else if(this.lang === 'ru'){ //如果为俄罗斯则检查视频是否为空，为空则提示
					this.getApi()
					return;
					if(this.videoUrl===''){
						uni.showToast({
							title: this.lang==='zh'?this.$t('请上传营业执照副本照片'):this.$t('请上传视频'),
							icon: 'none',
							duration: 1000
						})
					}else{
						this.getApi()
					}
				}
			
			},
			// 调用认证接口
			getApi(){
				if (this.lang === 'zh') {
				    this.serverData = this.serverData.map(item => {
				        switch (item) {
				            case 1: return '汽运';
				            case 2: return '火车';
				            case 3: return '海运';
				            case 4: return '空运';
				            default: return item;
				        }
				    });
				} else if (this.lang === 'ru') {
				    this.serverData = this.serverData.map(item => {
				        switch (item) {
				            case 1: return 'Автотранспорт';
				            case 2: return 'Ж/Д доставка';
				            case 3: return 'Морская доставка';
				            case 4: return 'Авиадоставка';
				            default: return item;
				        }
				    });
				}
				
				let Categorys = this.serverData.toString()
				
				this.data.provide_transport =  Categorys //可提供运输服务多选
				
				this.data.cfd_transport= this.start  //运输线路出发地
				this.data.mdd_transport = this.end   //运输线路目的地
				this.data.main_product = this.value  //经营范围
				if(this.formDatas.length!==0){
					this.data.license_image = this.formDatas.toString() //图片
				}
				
				this.data.agent_code = ""  //暂时无所谓
				this.data.user_id = this.userid //用户id
				this.data.video = this.videoUrl?this.videoUrl:''//视频
				this.isDisabled = true
				this.isLoading = true
				this.$u.api.release.newProfile(this.data).then(res => {
					this.isDisabled = false
					this.isLoading = false
					// 给用户一个提示
					uni.showToast({
						title: this.$t('认证成功'),
						icon: 'none',
						duration: 1000
					})
					// 一秒后跳转到认证页面
							
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/index'
						})
					}, 1000)
				}).catch(err => {
					this.isDisabled = false
					this.isLoading = false
					uni.showToast({
						title: this.$t('认证失败'),
						icon: 'none',
						duration: 1000
					})
				})
			},
			// 出发地
			selCityStart(key, value){
				this.start = value[2].value
			},
			// 出发地
			selCityEnd(key, value){
				this.end = value[2].value
			},
			// 可提供运输服务多选
			handeleTransportation(index){
				// 把下标存入serverID数组内，用来判断css样式
				let serverIDS = this.serverID.indexOf(index);
				if (serverIDS === -1) {
					this.serverID.push(index)
				}else{
					this.serverID.splice(serverIDS, 1);
				}
				
				// 用户选择的数据，1，2，3，4  传给后端
				this.serverData = this.serverID.map(item=>
					item+1
				)
			},
			// 返回上一页
			handelPreviouspage(){
				uni.navigateBack()
			},
			// 获取当权语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
				uni.getStorage({
					key: 'user_id',
					success: res => {
						this.userid = res.data
					}
				});
			},
			// 返回上一页
			handelReturn() {
				uni.navigateBack()
			},
			// 上传成功
			onSuccess(data, index, lists, name) {
			  // 将照片插入数组
			  this.formDatas.push(lists[0].response.data.url) 
			},
			// 删除图片
			onRemove(index, lists, name) {
			  //删除照片
			  this.formDatas.splice(index,1)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.backColor{
		width: 100%;
		height: 1202rpx;
		background: linear-gradient(180deg, #E1F8C7 -3%, rgba(255, 255, 255, 0.2) 56%);
		position: absolute;
		top: 0;
		z-index: -1;
	}
	.sa_detail {
		width: calc(100% - 60rpx);
		margin-top: 32rpx;
		font-size: 24rpx;
		color: #A4A4A4;
	}
	.sa_cards{
		width: calc(100% - 60rpx);
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25rpx;
	}
	.sa_card_block_active{
		width: 154rpx;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #000000;
		border-radius: 16rpx;
		background-color: #ffffff;
	}
	.sa_card_block{
		width: 154rpx;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #000000;
		border-radius: 16rpx;
		background: linear-gradient(132deg, #D3EF93 -1%, rgba(229, 245, 203, 0.24) 95%);
	}
	.sa_nlock{
		width: 46%;
		height: 76rpx;
		border: 1rpx solid #000000;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 30rpx 0 24rpx;
		color: #A4A4A4 ;
	}
	.sa_StartingFrom{
		width: calc(100% - 60rpx);
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}
	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}
	.but_left{
		width: 20%;
	}
	.but_right{
		width: 75%;
	}
	.sa_but{
		margin-top: 100rpx;
		margin-bottom: 136rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sa_images{
		width: calc(100% - 60rpx);
		display: flex;
		justify-content: flex-start;
	}
	.sa_License_title{
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 30rpx;
	}
	.sa_sales{
		width: calc(100% - 60rpx);
		margin-top: 24rpx;
	}
	.sa_nationality_title {
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.sa_imgs {
		margin-top: 18rpx;
		width: calc(100% - 60rpx);
		display: flex;
		flex-direction: column;
	}

	.sa_return {
		margin-top: 110rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sa_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>